<template>

	<div class='constbox'>
		<div class="pageContentBox">
			<table class="scanTable top-div" style="text-align: left">
				<tr>
					<td colspan="4" class="tr-color">
						<span class="title-style">基本信息</span>
					</td>
				</tr>

				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>姓名</div>
					</td>
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入姓名" v-model.trim="ApplyObj.xm"
							v-on:blur="nameBule()"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.xm != undefined && this.ApplyObj.xm.length > 0)">*必填项</span>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>身份证号</div>
					</td>
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入身份证号" v-model.trim="ApplyObj.sfzh"
							v-on:blur="idCheck()"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.sfzh != undefined && this.ApplyObj.sfzh.length > 0)">*必填项</span>
					</td>
				</tr>

				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>性别</div>
					</td>
					<td class="double">
						<a-radio-group v-model="ApplyObj.xbm" class="input-style-replyTwo">
							<a-radio :value="1"> 男 </a-radio>
							<a-radio :value="2"> 女 </a-radio>
						</a-radio-group>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>学生联系电话</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入学生联系电话"
							v-model.trim="ApplyObj.xslxdh" v-on:blur="phone()"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.xslxdh != undefined && this.ApplyObj.xslxdh.length > 0)">*必填项</span>
					</td>
				</tr>

				<tr class="tr-style">

					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>毕业学校地址</div>
					</td>
					
					<td class="double">
						<a-select class="input-style-replyTwo" :options="province" placeholder="请选择省份"
							@change="cityChange" v-model="ApplyObj.middleSchoolProvinceId" />
						<span class="nonull-tip" v-if="num != 0 &&  this.ApplyObj.middleSchoolProvinceId == ''">*必填项</span>
					</td>
					<td class="double">
						<a-select class="input-style-replyTwo" :options="city" placeholder="请选择市区"
							@change="countyChange" v-model="ApplyObj.middleSchoolCityId" />
						<span class="nonull-tip" v-if="num != 0 &&  this.ApplyObj.middleSchoolCityId == ''">*必填项</span>
					</td>	
					<td class="double">
						<a-select class="input-style-replyTwo" :options="county" placeholder="请选择县区"
							@change="getCounty" v-model="ApplyObj.middleSchoolCountyId" />
						<span class="nonull-tip" v-if="num != 0 &&  this.ApplyObj.middleSchoolCountyId == ''">*必填项</span>
					</td>	
					<td>
						<a-button type="danger" style="margin-left: 10px;" @click="clearArea">
							清除
						</a-button>
					</td>			
				</tr>
				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>中考总分</div>
					</td>
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入中考总分" v-on:blur="numCheck" v-model.trim="ApplyObj.kszf"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.kszf != undefined && this.ApplyObj.kszf.length > 0)">*必填项</span>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>毕业学校</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入毕业学校"
							v-model.trim="ApplyObj.byxx" v-on:blur="checkSchool"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.byxx != undefined && this.ApplyObj.byxx.length > 0)">*必填项</span>
					
					</td>
				</tr>


				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>专业部</div>
					</td>
					<td class="double">
						<a-select class="input-style-replyTwo" :options="addfaculty" placeholder="请选择"
							@change="addfacultyChange" v-model="ApplyObj.falId" />
						<span class="nonull-tip" v-if="num != 0 &&  this.ApplyObj.falId == ''">*必填项</span>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>拟报我校专业</div>
					</td>
					<td class="double">
						<a-select class="input-style-replyTwo" :options="addspecialty" placeholder="请选择拟报我校专业"
							v-model="ApplyObj.specId" />
						<a-button type="danger" style="margin-left: 10px;" @click="clearReplay">
							清除
						</a-button>
						<span class="nonull-tip" v-if="num != 0 &&  this.ApplyObj.specId == ''">*必填项</span>
					</td>
				</tr>

				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>家长姓名</div>
					</td>
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入家长姓名" v-on:blur="checkJZ" v-model.trim="ApplyObj.jzxm"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.jzxm != undefined && this.ApplyObj.jzxm.length > 0)">*必填项</span>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>家长联系电话</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入家长联系电话"
							v-model.trim="ApplyObj.jtlxdh" v-on:blur="checkJzphone"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.jtlxdh != undefined && this.ApplyObj.jtlxdh.length > 0)">*必填项</span>
					
					</td>
				</tr>


				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;">*</span>家庭地址</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入家庭地址"
							v-model.trim="ApplyObj.jtdz" v-on:blur="adressCheck"></a-input>
						<span class="nonull-tip"
							v-if="num != 0 && !(this.ApplyObj.jtdz != undefined && this.ApplyObj.jtdz.length > 0)">*必填项</span>
					</td>
					<td class="td-div">
						<div class="font-style">推荐人</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入推荐人"
							v-model.trim="ApplyObj.refereeRealName"></a-input>
					</td>
					
				</tr>
				<tr class="tr-style">
					<td class="td-div">
						<div class="font-style"><span style="color: red;"></span>身高</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入身高"
							v-model.trim="ApplyObj.height" v-on:blur="checkHeight"></a-input>
					</td>
					<td class="td-div">
						<div class="font-style"><span style="color: red;"></span>体重</div>
					</td>
					
					<td class="double">
						<a-input class="input-style-reply" placeholder="请输入体重"
							v-model.trim="ApplyObj.weight" v-on:blur="checkWeight"></a-input>
					</td>
					
				</tr>
			</table>

			<!-- 按钮区 -->
			<div class="content-head">
				<div class="applyBtn-div">
					<a-row>
						<a-col :span="10"> </a-col>
						<a-col :span="8">
							<a-button class="search-button btn-style btn" style="margin-right: 20px;" @click="tip"> 确 定
							</a-button>
							<a-button class="search-button btn-style btn-cancle" @click="cancel"> 取 消 </a-button>
						</a-col>
						<a-col :span="6"> </a-col>
					</a-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		axios
	} from '@/utils/request'

	export default {
		data() {
			return {
				ApplyObj: {
					xbm: 1,
					xm: '',
					sfzh: '',
					kszf: '',
					jtdz: '',
					xslxdh: '',
					specId: '',
					falId: '',
					jtdz: '',
					refereeRealName:'',
					byxx: '',
					middleSchoolProvince: '',
					middleSchoolProvinceId: '',
					middleSchoolCityId: '',
					middleSchoolCity: '',
					middleSchoolCountyId: '',
					middleSchoolCounty: '',
					byxx: '',
					weight: '',
					height: '',
					jzxm: '',
					jtlxdh: '',
					
				}, //弹窗对象
				//下拉框数据
				addfaculty: [],
				addspecialty: [],
				province: [],
				city: [],
				county: [],
				xuzhi: [],
				politic: [],
				healthy: [],
				nation: [],
				residence: [],
				num: 0,
				falId: 0,
				specId: 0,
				provinceId: 0,
				cityId: 0,
				countyId: 0,
			}
		},
		mounted() {
			this.getaddFaculty()
			this.getProvince()
			this.getXuzhi()
			this.getPolitic()
			this.getHealthy()
			this.getNation()
			this.getResidence()
			this.clearArea()
			this.clearReplay()
		},
		methods: {

			//添加
			tip() {
				this.num = 1
				if (this.ApplyObj.xm == '') {
					console.log(this.num)
					return
				}
				if (this.ApplyObj.sfzh == '') {
					console.log(this.num)
					return
				}
				if (this.ApplyObj.kszf  == '') {
					console.log("kszf:"+this.num)
					return
				}
				if (this.ApplyObj.jtdz  == '') {
					console.log("jtdz:"+this.num)
					return
				}
				if (this.ApplyObj.xslxdh  == '') {
					console.log("xslxdh:"+this.num)
					return
				}
				if (this.ApplyObj.specId  == '') {
					console.log("specId:"+this.num)
					return
				}
			
				if(this.ApplyObj.jtdz == ''){
					console.log("jtdz"+this.num)
					return
				}
				if(this.ApplyObj.byxx == ''){
					console.log("byxx:"+this.num)
					return
				}
				if(this.ApplyObj.middleSchoolProvince == ''){
					console.log("middleSchoolProvince:"+this.num)
					return
				}
				if(this.ApplyObj.middleSchoolCity == ''){
					console.log("middleSchoolCity:"+this.num)
					return
				}
				if(this.ApplyObj.middleSchoolCounty == ''){
					console.log("middleSchoolCounty:"+this.num)
					return	
				}
				if(this.ApplyObj.byxx == ''){
					console.log("byxx:"+this.num)
					return	
				}
				if(this.ApplyObj.jzxm == ''){
					console.log("jzxm:"+this.num)
					return	
				}
				if(this.ApplyObj.jtlxdh == ''){
					console.log("jtlxdh:"+this.num)
					return	
				}

				axios({
						url: 'enroll/ReplaceApply/addPreApply',
						method: 'post',
						data: this.ApplyObj,
					})
					.then((res) => {
						if (res.code == 200) {
							this.$message.success(res.message);
							this.cancel();
							return;
						}
						this.$message.warning(res.message);
					})
					.catch((err) => {
						this.$message.warning("添加失败！");
					})
			},

			//取消按钮
			cancel() {
				this.ApplyObj = {
					xbm: 1,
					xm: '',
					sfzh: '',
					kszf: '',
					jtdz: '',
					xslxdh: '',
					specId: '',
					falId: '',
				}
				this.num = 0
				this.clearArea()
				this.clearReplay()
			},
			//数据校验环节
			//校验不为空
			nameBule() {
				let xm = this.ApplyObj.xm;
				if (xm != undefined && xm.length > 0) {} else {
					this.$message.warning('姓名不能为空')
					this.num = 1
				}
			
			},
			//校验家长姓名
			checkJZ(){
                let jzxm = this.ApplyObj.jzxm
				if (jzxm!= undefined && jzxm.length > 0) {} else {
					this.$message.warning('家长姓名不能为空')
					this.num = 1
				}
			},
			//校验毕业学校
			checkSchool(){
                let byxx = this.ApplyObj.byxx
				if (byxx != undefined && byxx.length > 0) {} else {
					this.$message.warning('毕业学校不能为空')
					this.num = 1
				}
			},
		
			//校验地址不为空
			adressCheck() {
				let jtdz = this.ApplyObj.jtdz
				if (jtdz != undefined && jtdz.length > 0) {} else {
					this.$message.warning('详细地址很重要，请详细填写')
					this.num = 1
				}
			},
			 checkHeight() {
            const height = this.ApplyObj.height;
            if (height && isNaN(height)) {
                this.$message.warning('请输入有效的身高数字');
                this.ApplyObj.height = '';
            }
        },
        // 验证体重输入是否为数字
        checkWeight() {
            const weight = this.ApplyObj.weight;
            if (weight && isNaN(weight)) {
                this.$message.warning('请输入有效的体重数字');
                this.ApplyObj.weight = '';
            }
        },
			//曾用名校验
			oldNameBule() {
				let xm = this.ApplyObj.xm
				let cym = this.ApplyObj.cym

				if (cym != undefined && cym.length > 0 && xm != undefined && xm.length > 0 && xm == cym) {
					this.$message.warning('曾用名不能和姓名一致')
					//清空曾用名
					this.ApplyObj.cym = ''
				}
			},
			// 验证是否是邮箱
			email() {
				let dzxx = this.ApplyObj.dzxx
				let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
				if (!emailRule.test(dzxx) && dzxx != undefined) {
					this.$message.warning('请输入正确的邮箱地址')
					//清空邮箱
					this.ApplyObj.dzxx = ''
				}
			},
			// 验证是否是手机号码
			phone() {
				let xslxdh = this.ApplyObj.xslxdh
				let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/
				if (!phoneRule.test(xslxdh) && xslxdh != undefined) {
					this.$message.warning('请输入学生联系方式')
					//清空手机号
					this.ApplyObj.xslxdh = ''
				}
			},
			// 验证是否是手机号码
			checkJzphone() {
				let jtlxdh = this.ApplyObj.jtlxdh
				let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/
				if (!phoneRule.test(jtlxdh) && jtlxdh != undefined) {
					this.$message.warning('请输入家长联系方式')
					//清空手机号
					this.ApplyObj.jtlxdh = ''
				}
			},

			// 验证是否是身份证
			idCheck() {
				let sfzh = this.ApplyObj.sfzh
				let idRule =
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
				if (!idRule.test(sfzh) && sfzh != undefined) {
					this.$message.warning('请输入正确的身份证号')
					//清空身份证
					this.ApplyObj.sfzh = ''
					this.num = 1
				}
			},
			//日期选择器
			onChange(date, dateString) {
				console.log(date, dateString)
			},

			// 验证邮政编码
			checkCode() {
				let jtyb = this.ApplyObj.jtyb
				let codeRule = /^[1-9][0-9]{5}$/
				if (!codeRule.test(jtyb) && jtyb != undefined) {
					this.$message.warning('请输入正确的邮政编码')
					//清除邮政编码
					this.ApplyObj.jtyb = ''
				}
			},
			// 验证成绩
			numCheck() {
				let kszf = this.ApplyObj.kszf
				let numRule = /^[+-]?(0|([1-9]\d*))(\.\d{1})?$/
				if (!numRule.test(kszf) && kszf != undefined) {
					this.$message.warning('请输入正确的考试分数（仅一位小数）')
					//清除成绩
					this.ApplyObj.kszf = ''
					return
				}
				if (!(kszf > 0 && kszf <= 750)) {
					this.$message.warning('考试分数在0-750之间')
					//清除成绩
					this.ApplyObj.kszf = ''
				}
			},

			//选择性别
			onChangeSex() {
				console.log('radio checked', this.ApplyObj.xbm)
			},
			//选择是否低保
			onChangedb() {
				console.log('radio checked', this.ApplyObj.sfdb)
			},
			//选择就读方式
			onChangejdfs() {
				console.log('radio checked', this.ApplyObj.jdfs)
			},
			//选择招生类型
			onChangezslx() {
				console.log('radio checked', this.ApplyObj.zslx)
			},

			//清除专业下拉框
			clearReplay() {
				this.ApplyObj.falId = []
				this.ApplyObj.specId = []
				this.addspecialty = []
			},
			//清除户口下拉框
			clearArea() {
				this.ApplyObj.middleSchoolCityId = []
				this.ApplyObj.middleSchoolCountyId = []
				this.ApplyObj.middleSchoolProvinceId = []
				this.city = []
				this.county = []
			},
			//获取专业部
			getaddFaculty() {
				axios({
						url: 'enroll/reportMng/getFaculty',
						method: 'post',
						params: {},
					})
					.then((res) => {
						for (let addfaculty of res.result) {
							this.addfaculty.push({
								value: addfaculty.id,
								label: addfaculty.yxmc,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取专业部失败')
					})
			},
			//获取联动专业
			addfacultyChange(value) {
				this.addspecialty = []
				this.ApplyObj.specId = []

				if (value.length == 0) {
					return
				}

				axios({
						url: 'enroll/reportMng/getSpecialty',
						method: 'post',
						params: {
							facultyId: this.ApplyObj.falId,
						},
					})
					.then((res) => {
						this.addspecialty.splice(0, this.addspecialty.length)
						for (let addspecialty of res.result) {
							this.addspecialty.push({
								value: addspecialty.id,
								label: addspecialty.zymc,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取专业失败')
					})
			},
			//获取政治面貌列表
			getPolitic() {
				axios({
						url: 'enroll/ApplyMsgMng/getSysDict',
						method: 'post',
						params: {
							dictCode: 'politic',
						},
					})
					.then((res) => {
						for (let politic of res.result) {
							this.politic.push({
								value: politic.id,
								label: politic.itemText,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取政治面貌列表失败')
					})
			},
			//获取民族列表
			getNation() {
				axios({
						url: 'enroll/ApplyMsgMng/getSysDict',
						method: 'post',
						params: {
							dictCode: 'nation',
						},
					})
					.then((res) => {
						for (let nation of res.result) {
							this.nation.push({
								value: nation.id,
								label: nation.itemText,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取民族列表失败')
					})
			},
			//获取户口类别列表
			getResidence() {
				axios({
						url: 'enroll/ApplyMsgMng/getSysDict',
						method: 'post',
						params: {
							dictCode: 'residence',
						},
					})
					.then((res) => {
						for (let residence of res.result) {
							this.residence.push({
								value: residence.id,
								label: residence.itemText,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取户口类别列表失败')
					})
			},
			//获取健康状态列表
			getHealthy() {
				axios({
						url: 'enroll/ApplyMsgMng/getSysDict',
						method: 'post',
						params: {
							dictCode: 'healthy',
						},
					})
					.then((res) => {
						for (let healthy of res.result) {
							this.healthy.push({
								value: healthy.id,
								label: healthy.itemText,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取健康状态列表失败')
					})
			},
			//获取省份列表
			getProvince() {
				axios({
						url: 'enroll/ApplyMsgMng/getProvince',
						method: 'post',
						params: {},
					})
					.then((res) => {
						for (let province of res.result) {
							this.province.push({
								value: province.id,
								label: province.name,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取省份列表失败')
					})
			},
			//获取市区列表
			cityChange(value) {
				console.log(value)
				this.city = []
				this.county = []
				// this.ApplyObj.cityId = []
				// this.ApplyObj.countyId = []
                const selectedProvince = this.province.find(province => province.value === value);
				this.ApplyObj.middleSchoolProvince = selectedProvince.label;
				console.log(this.ApplyObj.middleSchoolProvince)
				if (value.length == 0) {
					return
				}

				axios({
						url: 'enroll/ApplyMsgMng/getCity',
						method: 'post',
						params: {
							id: this.ApplyObj.middleSchoolProvinceId,
						},
					})
					.then((res) => {
						this.city.splice(0, this.addspecialty.length)
						for (let city of res.result) {
							this.city.push({
								value: city.id,
								label: city.name,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取市区失败')
					})
			},
			//获取县区
			countyChange(value) {
				this.county = []
				this.ApplyObj.countyId = []

				const selectedCity = this.city.find(city => city.value === value);
				this.ApplyObj.middleSchoolCity = selectedCity.label;
				console.log(this.ApplyObj.middleSchoolCity)
				if (value.length == 0) {
					return
				}

				axios({
						url: 'enroll/ApplyMsgMng/getCity',
						method: 'post',
						params: {
							id: this.ApplyObj.middleSchoolCityId,
						},
					})
					.then((res) => {
						this.county.splice(0, this.addspecialty.length)
						for (let county of res.result) {
							this.county.push({
								value: county.id,
								label: county.name,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取县区失败')
					})
			},
			getCounty(value) { 
                const selectedCounty = this.county.find(county => county.value === value);
				this.ApplyObj.middleSchoolCounty = selectedCounty.label;
				console.log(this.ApplyObj.middleSchoolCounty)
			},
			//获取学制
			getXuzhi() {
				axios({
						url: 'enroll/ApplyMsgMng/getXuezi',
						method: 'post',
						params: {},
					})
					.then((res) => {
						for (let xuzhi of res.result) {
							this.xuzhi.push({
								value: xuzhi.id,
								label: xuzhi.xzmc,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取学制列表失败')
					})
			},
		},
	}
</script>

<style scoped>
	.tb {
		text-align: left;
	}

	/* 标题样式 */
	.title-style {
		width: 76px;
		height: 19px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 700;
		margin-left: 23px;
		color: #ffffff;
		line-height: 24px;
	}

	/* 表行高样式 */
	.tr-style {
		height: 49px;
		border: 1px solid #dee2e6;
	}

	/* 行颜色 */
	.tr-color {
		height: 60px;
		width: 1500px;
		background: #66c3fd;
	}

	.input-style-reply {
		color: #666666;
		width: 250px;
		background-color: #ffffff;
		border: 0;
		margin-left: 5px;
	}

	.input-style-replyTwo {
		color: #666666;
		width: 200px;
		background-color: #ffffff;
		border: 0;
		margin-left: 5px;
	}



	.td-div {
		width: 259px;
	}

	.applyBtn-div {
		width: 100%;
	}

	.btn-style {
		width: 100px;
		height: 40px;
		margin-bottom: 33px;
		margin-top: 30px;
	}

	.top-div {
		margin-top: 22px;
	}

	.date-style-Apply .ant-input {
		width: 300px;
		height: 34px;
	}

	.r-style {
		font-size: 18px;
	}

	.icon-img {
		margin-bottom: 5px;
		margin-right: 1px;
	}

	.info-tip {
		width: 94px;
		height: 19px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 700;
		color: #666666;
		line-height: 24px;
	}

	.tableClean-button {
		width: 88px;
		height: 34px;
		margin-right: 0px;
		margin-left: 10px;
		background: #028BE2;
		border-radius: 5px;
	}
</style>